<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>金贵银业</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}

			.mui-control-content .mui-loading {
				margin-top: 50px;
			}

			a.mui-active {
				border-bottom: 2px solid #BB9E77 !important;
				color: #BB9E77 !important;
			}

			.dianpulist li {
				float: left;
				width: 25%;
				text-align: center;
			}

			.dianpulist li img {
				width: 95% !important;
				border: 1px solid #EEEEEE;
			}

			.dianpulist li p {
				width: 95% !important;
				margin: 0 auto;
				margin-top: -27px;
				z-index: 1;
				position: relative;
				background: rgba(0, 0, 0, .3);
				text-align: center;
				color: #FFFFFF;
			}
		</style>
		<script>
			$(function() {
				$("#tankuang_shop").click(function() {
					$("#tankuang_goods").show();
					setTimeout(function() {
						$("#tankuang_goods").hide();
					}, 1500);
				});
				$("#tankuang_shop2").click(function() {
					var txt = "";
					txt += "Width: " + $("html").width() + "</br>";
					txt += "Height: " + $("html").height();
				});
				$(".goods_xqul > li").click(function() {
					var shindex = $(this).index();
					$(".goods_xqul > li").removeClass('onxqul');
					$(this).addClass('onxqul');
					$(".xuanxiangka").hide();
					$(".xuanxiangka").eq(shindex).show();
				});
			});
		</script>

		<script type="text/javascript" charset="utf-8">
			setTimeout(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
			},3000);
		</script>
	</head>

	<body style="padding-bottom: 150px;">
	   <header id="header"></header>
	   <div id="product_detail_wp"></div>
	   <footer id="footer"></footer>
	   <script type="text/html" id="product_detail">
		<div class="mui-bar" style="height: 45px;top: 0;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<!--
            	时间：2016-03-24
            	描述：右边按钮
            -->
			<a id="gouwuche_goods" class="mui-pull-right goods_che_btn" style="line-height: 40px; color: #333333 !important;"></a>
			<h1 class="mui-title">商品详情</h1>
		</div>

		<div class="mui-content" style="margin-top: 46px; background: #FFFFFF;">

			<div id="slider" class="mui-slider mui-active">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<% for(var i =0;i<goods_image.length;i++){　%>
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img style="width: 100%; height: 350px;" src="<%=goods_image[i]%>">
								</a>
							</div>
							<%}%>

					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img style="width: 100%; height: 350px;" src="<%=goods_image[0]%>">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">

					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<div style="padding: 10px; border-top: 1px solid #DDDDDD;">

				<div style="float: left;width: 80%; line-height: 30px;">
					<h4 class="font_sz_16"><%=goods_info.goods_name%></h4>
					<label class="color_red font_sz_16">￥<%=goods_info.goods_price%></label>
					<%if(goods_info.goods_marketprice>goods_info.goods_price){%><label style="text-decoration: line-through;color: #666666;">￥<%=goods_info.goods_marketprice%></label>
					<label class="red_but" ><%=(goods_info.goods_price/goods_info.goods_marketprice*10)%></label>折<%}%>
				</div>
				<div style=" float: right; border-left: 1px solid #EEEEEE;padding-left: 20px;">
					<img  style="width: 25px;" src="../images/fenxiang1956.png" />
				</div>&nbsp;
				<div class="clear"></div>
				<label style="width: 33%;float: left;color: #666666;"><%=(goods_info.goods_freight > 0) ? '运费：'+goods_info.goods_freight+' 元' : '包邮'; %></label>
				<label style="width: 33%;float: left;color: #666666;text-align: center;">月销<%=goods_info.goods_salenum%></label>
				<label style="width: 33%;float: left;color: #666666;text-align: right;"></label>
			</div>
			<div class="clear"></div>
			<div style="border-bottom: 1px solid #DDDDDD; height: 10px; margin-bottom: -21px;"></div>&nbsp;

			<div style="padding:0px 10px 10px 10px; color: #666666;height: 50px;line-height: 50px;">
				<!--label style="margin-right: 5px;"><img style="vertical-align: middle;margin-right: 5px;" src="../images/dian09.png" />全店满2件减6元</label>
				<label><img style="vertical-align: middle;margin-right: 5px;" src="../images/dian09.png" />全店满500元减50元</label-->
				<label style="float: right;">更多> </label>
			</div>
			<div style="width:100%; height: 10px; background: #EEEEEE;"></div>
			<!--div style="padding:0px 10px 10px 10px; color: #666666;height: 50px;line-height: 50px;">
				<label>请选择尺寸规格</label>
				<label style="float: right;">> </label>
			</div-->
			<div style="width:100%; height: 10px; background: #EEEEEE;"></div>
			<div style="background: #FFFFFF !important; float: left;padding-bottom: 10px;">

				<div id="goods_pingluen" style="padding:0px 10px 10px 10px; color: #666666; height: 50px;line-height: 50px;">累计评论（0）
					<label style="float: right;">更多> </label>
				</div>
				<div class="clear"></div>
				<!--div style="border-top: 1px solid #DDDDDD; width: 95%; margin: 0 auto;">
					<img src="../images/w27.png" style="vertical-align: middle; width: 60px;margin: 8px 8px 0;" />
					<label style=" color: #333333;">Juliet</label>

					<div style="padding:0px 10px 0px 10px; color: #666666;">宝贝不错，好喜欢好喜欢，物流也很快哦
						<p>2016-02-23 &nbsp;&nbsp; 颜色：银白 &nbsp;&nbsp; 规格：M</p>
					</div>

					<ul class="dianpulist">
						<li><img src="../images/w29.png">
						</li>
						<li><img src="../images/w30.jpg">
						</li>
						<li><img src="../images/w31.jpg">
						</li>
						<li><img src="../images/w34.jpg">
						</li>
					</ul>
				</div-->
				<div class="clear"></div>
				<!--div style="border-top: 1px solid #DDDDDD; width: 95%; margin: 10px auto 0px;">
					<img src="../images/w27.png" style="vertical-align: middle; width: 60px;margin: 8px 8px 0;" />
					<label style=" color: #333333;">Juliet</label>

					<div style="padding:0px 10px 0px 10px; color: #666666;">宝贝不错，好喜欢好喜欢，物流也很快哦
						<p>2016-02-23 &nbsp;&nbsp; 颜色：银白 &nbsp;&nbsp; 规格：M</p>
					</div>

				</div-->

				<!--div style="border-top: 1px solid #DDDDDD; width: 95%; margin: 10px auto 0px;">
					<img src="../images/w27.png" style="vertical-align: middle; width: 60px;margin: 8px 8px 0;" />
					<label style=" color: #333333;">Juliet</label>

					<div style="padding:0px 10px 0px 10px; color: #666666;">宝贝不错，好喜欢好喜欢，物流也很快哦
						<p>2016-02-23 &nbsp;&nbsp; 颜色：银白 &nbsp;&nbsp; 规格：M</p>
					</div>

				</div-->

			</div>

			<div class="clear"></div>

			<div style="width:100%; height: 10px; background: #EEEEEE;"></div>
			<div style="padding: 10px;">

				<div style="float: left;width: 80%; line-height: 30px;">
					<h4 class="font_sz_16"><%=goods_info.store_name;%></h4>
					<!--label style="color: #666666;" class="font_sz_16">总销量：10.9万</label>
					<label style="color: #666666;">&nbsp;&nbsp;收藏数：914468</label-->

				</div>
				<div style=" float: right;">
					<label style="float: right;color: #333333; border: 1px solid #CCCCCC; padding: 3px 5px 1px 5px;border-radius: 3px;" class="pd-collect">+ 收藏</label>
				</div>&nbsp;
				<div class="clear"></div>
				<!--label style="width: 33.3%;float: left;color: #666666;">宝贝描述
					<label class="color_red">4.9</label>
					<label class="bg_red_color_w">高</label>
				</label>
				<label style="width: 33.3%;float: left;color: #666666;text-align: center;">卖家服务
					<label class="color_red">4.9</label>
					<label class="bg_red_color_w">高</label>
				</label>
				<label style="width: 33.3%;float: left;color: #666666;text-align: right;">物流服务
					<label class="color_red">
						4.9</label>
					<label class="bg_red_color_w">高</label>
				</label-->
				<div class="clear" style="margin: 10px;"></div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 10px; margin-bottom: -21px;"></div>&nbsp;
				<div style="height: 15px;" class="clear"></div>
				<label style="float: left;color: #bd9f61; border: 1px solid #bd9f61; padding: 3px 5px 1px 5px;border-radius: 3px; width: 45%; text-align: center;">全部商品</label>
				<label style="float: right;color: #bd9f61; border: 1px solid #bd9f61; padding: 3px 5px 1px 5px;border-radius: 3px; width: 45%; text-align: center;"><img style="width: 15px; vertical-align: middle;" src="../images/goods228.png" />进入店铺</label>
				<div style=" height: 15px;"></div>
			</div>
			&nbsp;

		</div>
		<div class="clear"></div>
		<div style="width:100%; height: 10px; background: #EEEEEE;"></div>
		<div style="border-bottom: 1px solid #DDDDDD; height: 50px; background: #FFFFFF;">
			<ul class="goods_xqul">
				<li class="onxqul">
					<p style="border-right:1px solid #DDDDDD ;">图文详情</p>
				</li>
				<li>
					<p style="border-right:1px solid #DDDDDD;">商品参数</p>
				</li>
				<li>
					<p>本店推荐</p>
				</li>
			</ul>

			<div class="xuanxiangka" style="min-height: 330px; width: 100%; float: left;" id="goods_body">

			</div>
			

			<div class="xuanxiangka" style=" width: 100%; float: left;border-bottom: 1px solid #DDDDDD; padding:0 10px; background: #FFFFFF; display: none;">
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状/图案</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">是否多层</label>
					<label style="color: #BD9F61; margin-left: 10px;">否</label>
				</div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
				<div style="border-bottom: 1px solid #EEEEEE; height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
				<div style="height: 45px; line-height: 45px;">
					<label style="width: 25%; float: left;">形状</label>
					<label style="color: #BD9F61; margin-left: 10px;">其他形状/图案</label>
				</div>
			</div>

			<div class="xuanxiangka" style="min-height: 330px; width: 100%; float: left; display: none;">
				<div>
					<img style="width: 100%; margin: 10px auto;" src="../images/baobeituijian54251.png" />

					<ul class="pinpai_list" style="padding-top:5px ; background: #FFFFFF; float: left; padding-bottom: 10px;">
						<li style="margin-top: 6px;">
							<div style="border: 1px solid #dddddd; background: #FFFFFF; width: 96%; float: left;">
								<img style="" src="../images/indeximg_105.jpg">
								<label style="float: left;padding-left: 5px;">金贵银业工艺品壁限量版...</label>
								<p style="float: left; padding-left: 5px; width: 100%;">
									<label class="color_red">￥153.00</label>
									<label style="float: right;padding-right:3px;">
										0人购买</label>
								</p>
							</div>
						</li>

						<li style="margin-top: 6px;">
							<div style="border: 1px solid #dddddd; background: #FFFFFF; width: 96%; float: left;">

								<img style="" src="../images/indeximg_105.jpg">
								<label style="float: left;padding-left: 5px;">金贵银业工艺品壁限量版...</label>
								<p style="float: left; padding-left: 5px; width: 100%;">
									<label class="color_red">￥153.00</label>
									<label style="float: right;padding-right:3px;">
										0人购买</label>
								</p>
							</div>
						</li>

						<li style="margin-top: 6px;">
							<div style="border: 1px solid #dddddd; background: #FFFFFF; width: 96%; float: left;">

								<img style="" src="../images/indeximg_105.jpg">
								<label style="float: left;padding-left: 5px;">金贵银业工艺品壁限量版...</label>
								<p style="float: left; padding-left: 5px; width: 100%;">
									<label class="color_red">￥153.00</label>
									<label style="float: right;padding-right:3px;">
										0人购买</label>
								</p>
							</div>
						</li>

						<li style="margin-top: 6px;">
							<div style="border: 1px solid #dddddd; background: #FFFFFF; width: 96%; float: left;">

								<img style="" src="../images/indeximg_105.jpg">
								<label style="float: left;padding-left: 5px;">金贵银业工艺品壁限量版...</label>
								<p style="float: left; padding-left: 5px; width: 100%;">
									<label class="color_red">￥153.00</label>
									<label style="float: right;padding-right:3px;">
										0人购买</label>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<div class="clear"></div>
		<div>
			<img style="width: 100%; margin: 10px auto;" src="../images/sese04.png" />

			<ul class="pinpai_list" style="padding-top:5px ; background: #FFFFFF; float: left; padding-bottom: 10px;">
				<%for (var i = 0;i<goods_commend_list.length;i++){%>
				<li style="margin-top: 6px;">
					<div style="border: 1px solid #dddddd; background: #FFFFFF; width: 96%; float: left;">
				<a href="product_detail.html?goods_id=<%=goods_commend_list[i].goods_id%>">
					<img src="<%=goods_commend_list[i].goods_image_url%>"></a>
						<label style="float: left;padding-left: 5px;" class="pddc-commendw-t" title="<%=goods_commend_list[i].goods_name%>">
										<%=goods_commend_list[i].goods_name%>
									</label>
						<p style="float: left; padding-left: 5px; width: 100%;">
							<label class="color_red" title="￥<%=goods_commend_list[i].goods_price%>">￥<%=goods_commend_list[i].goods_price%></label>

						</p>
				</div>
				</li>
				<%}%>

			</ul>
		</div>

		<style>
			.mui-bar-popover {
				width: 100%;
			}
		</style>

		<nav class="mui-bar mui-bar-tab ">
			<a class="mui-tab-item" href="#Popover91" style="color: #696969 !important;border-right: 1px solid #DDDDDD;width: 5px;">
				<p style="height: 12px;"><img src="../images/8834.png" style="width: 20px;" /></p>客服</a>
			<a class="mui-tab-item" href="#Popover_2" style="color: #696969 !important;border-right: 1px solid #DDDDDD;width: 5px;">
				<p style="height: 12px;"><img src="../images/29.png" style="width: 20px;" /></p>喜欢</a>
			<a class="mui-tab-item" href="#Popover_0" style="color: #696969 !important;width: 5px;">
				<p style="height: 12px;"><img src="../images/03.png" style="width: 20px;" /></p>店铺</a>
			<a id="tankuang_shop2" class="mui-tab-item" href="#Popover_1" style="background: #cbac6b; color: #FFFFFF !important; width: 10px;">加入购物车</a>
			<a class="mui-tab-item" href="#Popover_1" style="background: #ab9154; color: #FFFFFF !important; width: 10px;">立即购买</a>
		</nav>

		<div id="Popover_0" class="mui-popover mui-bar-popover">

		</div>

		<div id="Popover_1" style="border-bottom-left-radius: initial !important; padding-bottom: 60px;" class="mui-popover mui-bar-popover">
			<ul class="mui-table-view" style="width: 100% !important;border-bottom-left-radius:0 !important;">

				<li class="mui-table-view-cell mui-table-view-cell886" style="padding: 0 15px;">
					<label style="float: left;"><img src="../images/999.png" style="width: 100px;border: 1px solid #EEEEEE;"></label>
					<div style="float: left;">
						<label>925纯银转运珠项链</label>
						<br/>
						<label class="color_red">￥128</label>
					</div>
					<a class="mui-tab-item font_sz_16" href="#Popover_1" style="color: #cbac6b!important; width:40px; margin-top: 10px; border: 0 !important; left: 40px;"><img src="../images/XX150210.png" /></a>
				</li>

				<li class="mui-table-view-cell mui-table-view-cell886" style="width: 100% !important;">
					<p>颜色：</p>
					<label class="BD9F61_but">转运珠+40cm项链</label>
					<label class="BD9F61_but">40cm项链</label>
					<label class="BD9F61_but">转运珠</label>
				</li>
				<li class="mui-table-view-cell mui-table-view-cell886">
					<p>尺寸：</p>
					<label class="BD9F61_but">送擦银布+礼盒</label>
					<label class="BD9F61_but">礼盒</label>
					<label class="BD9F61_but">送擦银布</label>
				</li>
				<li class="mui-table-view-cell mui-table-view-cell886" style="padding: 10px 15px 0px;">
					<p>数量：</p>
					<label style="float: left;color: #bd9f61; border: 1px solid #bd9f61; padding: 3px 5px 0px 5px;border-radius: 5px;">-</label>
					<input type="text" value="2" style="float:left;width:60px; height:30px;text-align: center;margin-right: 10px;" />
					<label style="float: left;color: #bd9f61; border: 1px solid #bd9f61; padding: 3px 5px 0px 5px;border-radius: 5px;">+</label>
				</li>

				<li class="mui-table-view-cell" style="text-align: center; padding: 0;">
					<label id="tankuang_shop" style="background: #cbac6b; color: #FFFFFF;width: 50%;margin: 0px; float: left; height: 50px; line-height: 50px;">加入购物车</label>
					<label style="background: #ab9154; color: #FFFFFF;width: 50%;margin: 0px; float: left; height: 50px; line-height: 50px;">立即购买</label>
				</li>

			</ul>
		</div>
		<div id="Popover_2" class="mui-popover mui-bar-popover">

		</div>

		<div id="Popover91" class="mui-popover mui-bar-popover">

		</div>
		<div id="tankuang_goods" style=" position:fixed;display: none; top:25%;left: 20%; z-index: 9999;">
			<img style="width: 80%;" src="../images/tankuang_03.png" />
		</div>
		</script>
	   <script type="text/javascript" src="../js/zepto.min.js"></script>
	   <script type="text/javascript" src="../js/config.js"></script>
	   <script type="text/javascript" src="../js/template.js"></script>
	   <script type="text/javascript" src="../js/swipe.js"></script>
	   <script type="text/javascript" src="../js/common.js"></script>
	   <script type="text/javascript" src="../js/simple-plugin.js"></script>
	   <script type="text/javascript" src="../js/tmpl/common-top.js"></script>
	   <script type="text/javascript" src="../js/tmpl/footer.js"></script>
	   <script type="text/javascript" src="../js/tmpl/product_detail.js"></script>
	</body>

</html>